<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import CheckboxGroup from "./CheckboxGroup.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { Checkbox } from "../Checkbox";
    import { Divider } from "../Divider";

    const { Story } = defineMeta({
        title: "Components/Form/CheckboxGroup",
        component: CheckboxGroup,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let checked = $state<boolean | "indeterminate">(false);
    let checkedList = $state<string[]>([]);
</script>

<Story name="Default">
    {#snippet template(args)}
        <CheckboxGroup
            data={[
                { label: "苹果", value: "1" },
                { label: "桃子", value: "2" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <CheckboxGroup
                {...args}
                data={[
                    { label: "苹果", value: "1" },
                    { label: "桃子", value: "2" },
                ]}
            />

            <CheckboxGroup
                data={[
                    { label: "苹果", value: "1", disabled: true },
                    { label: "桃子", value: "2" },
                ]}
            />
        </Space>
    {/snippet}
</Story>

<Story name="Block" args={{ block: true }}>
    {#snippet template(args)}
        <CheckboxGroup
            {...args}
            data={[
                { label: "苹果", value: "1" },
                { label: "桃子", value: "2" },
            ]}
        />
    {/snippet}
</Story>

<Story name="CustomField" args={{ textField: "title", valueField: "id" }}>
    {#snippet template(args)}
        <CheckboxGroup
            {...args}
            data={[
                { title: "苹果", id: "1" },
                { title: "桃子", id: "2" },
            ]}
        />
    {/snippet}
</Story>

<Story name="CheckAll">
    {#snippet template(args)}
        {@const data = [
            { label: "苹果", value: "1" },
            { label: "桃子", value: "2" },
            { label: "柚子", value: "3" },
        ]}
        {@const onCheckChange = (checked: boolean) => {
            if (checked) {
                checkedList = data.map((item) => item.value);
            } else {
                checkedList = [];
            }
        }}
        {@const onCheckListChange = (list: string[]) => {
            if (list.length === data.length) {
                checked = true;
            } else if (list.length === 0) {
                checked = false;
            } else {
                checked = "indeterminate";
            }
        }}
        <div>
            <Checkbox bind:checked onchange={onCheckChange} label="全选" />
        </div>
        <Divider />
        <CheckboxGroup bind:value={checkedList} {data} onchange={onCheckListChange} />
    {/snippet}
</Story>

<Story name="Extra">
    {#snippet template(args)}
        <div style="width: 250px">
            <CheckboxGroup
                type="card"
                value={["3"]}
                data={[
                    { label: "苹果", value: "1", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "桃子", value: "2", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "香蕉", value: "3", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "猕猴桃", value: "4", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                ]}
            />
        </div>

        <div style="width: 250px">
            <CheckboxGroup
                type="pureCard"
                value={["3"]}
                data={[
                    { label: "苹果", value: "1", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "桃子", value: "2", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "香蕉", value: "3", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "猕猴桃", value: "4", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                ]}
            />
        </div>
    {/snippet}
</Story>
